<template>
	<view class="tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<!-- <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->

		<!-- 顶部自定义导航 -->
		<!-- <tn-nav-bar isBack="true" bottomShadow="true" backgroundColor="none" @click="goBack">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view class="custom-nav__back">
					<text class="tn-text-bold tn-text-xl tn-color-black">作者认证</text>
				</view>
			</view>
		</tn-nav-bar> -->

		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black"></text>
			</view>
		</tn-nav-bar>
		<template v-if="show == 1">
			<view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<!-- 这个是图鸟UI响应用户需求，推出的一个uni_modules组件，插件市场点击右上角，导入即可 https://ext.dcloud.net.cn/plugin?id=10172 -->
				<wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal>

				<view class="tn-flex tn-flex-row-between tn-strip-bottom tn-padding" @tap.stop="openAuthorizationModal"
					style="margin-top: 0;">
					<view class="justify-content-item">
						<view class="tn-text-bold tn-text-lg">
							{{authorInfo.nickname}}
						</view>
						<view class="tn-color-gray tn-padding-top-xs">
							请完善创作头像和名称(点击头像 自动获取)
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey">
						<view class="logo-pic tn-shadow">
							<view class="logo-image">
								<view class="tn-shadow-blur"
									:style="'background-image:url('+ authorInfo.qr_url +');width: 80rpx;height: 80rpx;background-size: cover;'">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
				<view class="justify-content-item" style="width: 100%;">
					<view class="tn-text-bold tn-text-lg">
						个人简介
					</view>
					<view class="tn-color-gray tn-padding-top-xs">
						<textarea class="area-content"
							style="min-height: 40rpx;max-height:100rpx; font-size: 30rpx;line-height: 20rpx;" maxlength="100"
							placeholder="请输入个人简介 让更多的用户了解到你" @input="remarkInput" placeholder-style="color:#AAAAAA"
							:value="authorInfo.remark"></textarea>
						<!-- <input placeholder="请输入个人简介" type="textarea" @input="realNameInput" style="height: auto;word-wrap : break-word;" placeholder-style="color:#AAAAAA" maxlength="255" :value="userInfo.name"></input> -->
					</view>
				</view>
				<!-- <view class="justify-content-item tn-text-lg tn-color-grey">
			      <view class="tn-icon-right tn-padding-top"></view>
			    </view> -->
			</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item">
						<view class="tn-text-bold tn-text-lg">
							性别
						</view>
						<view class="tn-color-gray tn-padding-top-xs">
							<view class="tn-color-gray">{{array[authorInfo.gender]}}</view>
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey">
						<view class="tn-icon-right tn-padding-top"></view>
					</view>
				</view>
			</picker>
			<picker @change="bindDateChange" mode="date" :value="date" :start="startDate" :end="endDate">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item">
						<view class="tn-text-bold tn-text-lg">
							生日
						</view>
						<view class="tn-color-gray tn-padding-top-xs">
							{{authorInfo.birthday}}
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey">
						<view class="tn-icon-right tn-padding-top"></view>
					</view>
				</view>
			</picker>
			<picker @change="bindPickerChange1" :value="authorInfo.profession" :range="array1">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item">
						<view class="tn-text-bold tn-text-lg">
							专业
						</view>
						<view class="tn-color-gray tn-padding-top-xs">
							{{profession}}
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey">
						<view class="tn-icon-right tn-padding-top"></view>
					</view>
				</view>
			</picker>
			<tn-modal v-model="show1" :custom="true" :showCloseBtn="true">
				<view class="custom-modal-content">
					<view class="">
						<view class="tn-text-lg tn-text-bold tn-color-purplered tn-text-center tn-padding">修改昵称</view>
						<view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
							<input placeholder="不许凶我" name="input" placeholder-style="color:#AAAAAA" maxlength="20"></input>
						</view>
					</view>
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" fontBold>
							<text class="tn-color-white">保 存</text>
						</tn-button>
					</view>
				</view>
			</tn-modal>
			<view class="author-agreement" style="display: flex;justify-content: center;margin-top: 30rpx;color: blue;">
				<view class="">
					<tn-checkbox-group>
						<tn-checkbox @change="checkboxChange" v-model="checked" v-for="(item, index) in checkbox" :key="index"
							:name="item.name">{{item.name}}
						</tn-checkbox>
					</tn-checkbox-group>
				</view>
				<view class="" @click="readAuthorAgreement">
					请仔细阅读创作者用户协议
				</view>
			</view>
			<tn-button backgroundColor="#3668FC" margin="40rpx 2%" width="96%" fontBold height="80rpx" fontSize="30"
				@click="updateUserInfo">
				<text class="tn-color-white">提 交 认 证</text>
			</tn-button>
		</template>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
	import { authorInfo, updateInfo } from "@/utils/api/author"
	import { userProfession } from "@/utils/api/user"
	import { uploadImage } from "@/utils/api/file"
	import { configState } from "@/utils/api/sys.js"
	export default {
		components: {
			WxUserInfoModal
		},
		name: 'TemplateSet',
		mixins: [template_page_mixin],
		data() {
			return {
				showAuthorizationModal: false,
				show1: false,
				show2: false,
				array: ['保密', '男', '女'],
				userProfession: [],
				array1: [],
				profession: "",
				authorInfo: {
					qr_url: "",
					birthday: "",
					gender: 0,
					nickname: "",
					profession: {},
					remark: "",
				},
				checkbox: [{
					name: '',
					checked: true,
					disabled: false
				}, ],
				checked: false,
				show: 2,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			this.getAuthorInfo()
			this.getSysState()
		},
		onLoad() {
			this.getUserProfession()
		},
		methods: {
			getSysState() {
				configState({
					key: "wechat_mini_state"
				}).then(res => {
					this.show = res.val
				})
			},
			getUserProfession() {
				userProfession({}).then(res => {
					for (var i = 0; i < res.length; i++) {
						this.array1.push(res[i].title)
					}
					this.userProfession = res
				})
			},
			getAuthorInfo() {
				authorInfo().then(res => {
					this.profession = res.profession.title
					this.authorInfo = res
					this.authorInfo.profession = res.profession.uid
				})
			},
			updateUserInfo() {
				if (!this.checked) {
					this.$func.showToast("请先阅读创作者用户协议")
					return
				}
				updateInfo(this.authorInfo).then(res => {
					this.$func.templateSubscribe(getApp().globalData.authorAudit)
					if (res.code == 5) {
						this.$func.showToast(res.msg)
						uni.navigateBack()
					} else {
						this.$func.showToast(res.msg)
					}
				})
			},
			// 创作者用户协议
			checkboxChange(e) {
				this.checked = e.value
			},
			readAuthorAgreement() {
				uni.navigateTo({
					url: "/pageC/about/about?uid=493050725513824825"
				})
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			remarkInput(e) {
				this.authorInfo.remark = e.detail.value
			},
			// 弹出模态框
			showModal1(event) {
				this.openModal1()
			},
			// 打开模态框
			openModal1() {
				this.show1 = true
			},

			// 弹出模态框
			showModal2(event) {
				this.openModal2()
			},
			// 打开模态框
			openModal2() {
				this.show2 = true
			},

			bindPickerChange: function(e) {
				this.authorInfo.gender = e.detail.value
			},

			bindPickerChange1: function(e) {
				this.profession = this.userProfession[e.detail.value].title
				this.authorInfo.profession = this.userProfession[e.detail.value].uid
			},

			bindDateChange: function(e) {
				this.authorInfo.birthday = e.detail.value
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 打开获取用户信息弹框
			openAuthorizationModal() {
				this.showAuthorizationModal = true
			},

			// 上传用户头像
			updatedUserInfoEvent(info) {
				this.authorInfo.nickname = info.nickname
				this.authorInfo.qr_url = info.avatar_url
				uni.showLoading({
					title: '头像上传中',
					mask: true,
				})
				uploadImage(info.avatar_url).then(res => {
					if (res.code == 100) {
						this.authorInfo.qr_url = res.data.url
						this.showAuthorizationModal = false
					} else {
						this.$func.showToast('头像上传失败')
					}
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 授权 */
	.login-page {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 授权按钮 */
	.submit-btn {
		width: 100%;
		background-color: #05C160;
		color: #FFFFFF;
		margin-top: 60rpx;
		border-radius: 10rpx;
		padding: 25rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx;
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	/* 用户头像 start */
	.logo-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 2rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}


	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/
</style>